<template>
    <div class="mySlef">

        <div class="head">
            <div class="pic">
                <img src="@/assets/img/b.png" alt="">
            </div>
            <h4 @click="login">立即登录</h4>
        </div>
      
        <van-grid class="box" >
                <van-grid-item icon="friends-o" text="关注影人" @click="look"/>
                <van-grid-item icon="smile-comment-o" text="关注角色" @click="roles"/>
                <van-grid-item icon="play-circle-o" text="收藏影评" @click="talk"/>
                <van-grid-item icon="video-o" text="收藏视频" @click="collectvideo"/>
            </van-grid>

        <ul class="about">
            <li><van-icon color="#ffc04f" name="comment-o" />&nbsp;意见反馈<van-icon name="arrow" @click="left()"/></li>
            <li><van-icon color="#ffc04f" name="search" />&nbsp;关于作者<van-icon name="arrow" @click="left1()"/></li>
            <li><van-icon color="#ffc04f" name="aim" />&nbsp;关于项目<van-icon name="arrow" @click="left2()"/></li>
            <li><van-icon color="#ffc04f" name="edit" />&nbsp;更新日志<van-icon name="arrow" @click="left3()"/></li>
            <li class="last"><van-icon color="#ffc04f"
                    name="setting-o" />&nbsp;设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<van-icon name="arrow" @click="left4()"/></li>
        </ul>
    </div>
</template>
<script>
export default {
       methods:{
        left(){
            this.$router.push('/one');
        },
        left1(){
            this.$router.push('/two');
        },
        left2(){
            this.$router.push('/three');
        },
        left3(){
            this.$router.push('/four');
        },
        left4(){
            this.$router.push('/five');
        },
        login(){
            
            this.$router.push('/login');
        },
        look(){
            
            this.$router.push('/actor');
        },
        roles(){
            
            this.$router.push('/roles');
        },
        talk(){
            
            this.$router.push('/talk');
        },
        collectvideo(){
            
            this.$router.push('/collectvideo');
        },
      
       }
}
</script>
<style lang="scss" scoped>
.mySlef {
    // display: flex;
    background-color: #fff;

    .head {
        height: 185px;
        background-color: #e54847;
        display: flex;

        // .pic {
        //     width: 30px;
        //     height: 30px;
        //     border-radius: 40px;
        //     background-color: #fff;
        //     // height: 375px;
        //     margin-top: 50px;
        //     margin-left: 10px;
        // }
        img{
            width:70px;
            height:70px;
            margin-top: 60px;
            margin-left: 20px;
        }

        h4 {
            color: #fff;
            // height: 375px;
            margin-top: 85px;
            margin-left: 20px;
            font-size: 20px;
        }

    }

    section {
        width: 345px;
        height: 80px;
        background-color: #fff;
        margin: auto;
        border-radius: 10px;
        box-shadow: 0 0.08rem 0.08rem #eee;



        // align-items: center;
        ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: -40px;

            li {
                margin: auto;
                line-height: 80px;
                font-size: 12px;
                margin-top: 20px;
            }

        }
    }

    .about {
        width: 345px;
        margin: auto;
        margin-top: 50px;

        li {
            width: 345px;
            height: 47px;
            line-height: 47px;
            border-bottom: 1px solid #ccc;

            .van-icon-arrow:before {
                margin-left: 240px;
            }

            // padding-right: 5px;


        }

    }

} .box {
    height: 70px;
    width: 350px;
    position: absolute;
    left: 13px;
    top: 150px;
   overflow: hidden;

}
</style>